<template>
  <div class="right-header">
    <el-row>
      <el-col :span="12">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, index) in breadList2"
            :key="item.path"
            :to="item.path"
            >{{ item.title }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>
      <el-col :span="12" class="right">
        <!-- 下拉 -->
        <el-dropdown size="medium" @command="handleDrop">
          <span class="el-dropdown-link">
            欢迎你,{{ form.account
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="person">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 头像 -->
        <el-avatar :size="50" :src="form.imgUrl"></el-avatar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/user";
import local from "@/utils/local";
export default {
  data() {
    return {
      // account: "admin",
      // avatar: require("@/assets/images/logo.png"),
      breadList: [],
      form: {
        account: "",
        ctime: "",
        id: "",
        imgUrl: "",
        userGroup: "",
      },
    };
  },
  methods: {
    //计算面包屑方法
    calcBread() {
      let temp = [{ path: "/", title: "首页" }];
      //遍历matched找到meta获取需要的数据
      this.$route.matched.forEach((v) => {
        // console.log(v);
        if (v.meta.path && v.meta.title) {
          temp.push(v.meta);
          // console.log(temp);
        }
      });
      this.breadList = temp;
    },
    async getData() {
      let res = await getUserInfo();
      // console.log("res", res);
      this.form = res.data;
      // window.localStorage.setItem("userInfo", JSON.stringify({ ...this.form }));
      local.set("userInfo", { ...this.form });
    },
    // 下拉触发
    handleDrop(val) {
      //清理本地数据
      local.clear();
      // console.log(val);
      if (val === "person") {
        this.$router.push({ path: "/account/person" });
      }
      if (val === "logout") {
        this.$message({
          message: "退出成功",
          type: "success",
        });
        this.$router.push({ path: "/login" });
        // window.localStorage.clear()
      }
    },
  },
  created() {
    this.calcBread();
    this.getData();
    //中央事件总线 接受数据
    this.$bus.$on("uploadImg", () => {
      this.getData();
    });
  },
  watch: {
    "$route.path"() {
      this.calcBread();
    },
  },
  //面包屑方法2  计算属性
  computed: {
    breadList2() {
      let temp = [{ path: "/", title: "首页" }];
      //便利matched找到meta获取需要的数据
      this.$route.matched.forEach((v) => {
        //判断当前路由对象里面是否有meta 且有path title值
        if (v.meta.path && v.meta.title) {
          temp.push(v.meta);
        }
      });
      return temp;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  height: 100%;
}
.el-col {
  height: 100%;
  display: flex;
  align-items: center;
}
.right-header {
  padding: 0 10px;
}
.right {
  justify-content: flex-end;
  padding: 0 20px;
}
.el-dropdown-link {
  cursor: pointer;
}
</style>